<template>
  <d2-container better-scroll class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <div
          class="component-item title"
          style="border-bottom:none;margin-left:0;"
        >
          <div class="fl">
            <img src="./image/dian.png" alt="" style="width:10px;" />
            <p class="title_l">我的消息</p>
          </div>
          <div
            class="fr"
            style="margin:0 30px 5px 20px;font-size:14px;cursor:pointer;"
            @click="more"
          >
            <p style="color:#3b8af3;">
              查看更多
              <d2-icon name="angle-double-right" style="color:#3b8af3" />
            </p>
          </div>
        </div>
        <el-card
          shadow="hover"
          :body-style="{ padding: '0px' }"
          style="clear:both;"
        >
          <el-table
            ref="multipleriskTj"
            :data="msgList.slice(0, 9)"
            highlight-current-row
            border
            fit
            @current-change="handleCurrentshclChange"
            :header-cell-style="{
              background: '#eef1f6',
              'text-align': 'center',
              'border-right': 'none'
            }"
            :cell-style="{ 'border-right': 'none', background: '#fff' }"
            style="width:100%;font-size:12px;"
          >
            <el-table-column
              label="内容"
              prop="content"
              min-width="280"
              sortable
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">{{ scope.row.content }}</template>
            </el-table-column>
            <el-table-column label="名称" prop="title" width="90px" sortable>
            </el-table-column>
            <el-table-column
              label="日期"
              prop="created_time"
              width="75px"
              sortable
            >
              <template slot-scope="scope">{{
                scope.row.created_time | dateYMDHMSFormat_ss1
              }}</template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="9">
        <div
          class="component-item title"
          style="border-bottom:none;margin-left:0;"
        >
          <div class="fl">
            <img src="./image/dian.png" alt="" style="width:10px;" />
            <p class="title_l">企业经营监控</p>
          </div>
          <div
            class="fr"
            style="margin:0 30px 5px 20px;font-size:14px;cursor:pointer;"
            @click="more1"
          >
            <p style="color:#3b8af3;">
              查看更多
              <d2-icon name="angle-double-right" style="color:#3b8af3" />
            </p>
          </div>
        </div>
        <div
          class="hovtu"
          style="clear:both;border:1px solid #ddd;box-shadow:0 0 5px 0 hsl(0deg 0% 0% / 30%);"
        >
          <div id="main_right_center" style="width: 100%;height:358px;"></div>
        </div>
      </el-col>
      <el-col :span="7" style="padding:0 20px;">
        <div
          class="component-item title"
          style="border-bottom:none;margin-left:0;"
        >
          <div class="fl">
            <img src="./image/dian.png" alt="" style="width:10px;" />
            <p class="title_l">常用功能</p>
          </div>
          <div class="fr" style="margin:10px 30px 0 0;">
            <span
              @click="delCommons()"
              style="margin: 30px 0 0 15px;cursor:pointer"
            >
              <d2-icon name="trash" class="icon" style="color:#fc0302" />
            </span>
          </div>
        </div>
        <el-row :gutter="20" class="zj bgzj" style="clear:both;">
          <el-col :span="8" v-for="(item, index) in commonData" :key="index">
            <el-card
              class="bra"
              shadow="hover"
              :body-style="{ padding: '0px' }"
              v-bind:class="{
                active: item == delist
              }"
            >
              <div
                class="grid-content grid-con-1"
                style="height:60px;cursor:pointer"
                @dblclick="selected(item)"
                @click="linkto(item)"
              >
                <div class="grid-cont-right" style="padding:20px;">
                  <p
                    class="tl xblue f18 b"
                    style="margin:20px 0 0 0;color:#fff;"
                  >
                    0{{ index + 1 }}
                  </p>
                  <div style="color:#fff;">{{ item.name }}</div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8" v-if="flag" class="bal">
            <el-card
              class="bra border"
              shadow="hover"
              :body-style="{ padding: '0px' }"
            >
              <div
                class="grid-content grid-con-1 out"
                style="height:60px;"
                @click="addFunction"
              >
                <div class="grid-cont-right">
                  <d2-icon
                    name="plus"
                    style="color:#ddd;font-size:30px;padding-top: 10px;"
                    class="content"
                  />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <!-- 添加常用功能弹框 -->
      <el-dialog
        title="添加常用功能"
        :visible.sync="dialogVisible"
        width="25%"
        :append-to-body="true"
      >
        <el-form class="filter-container" label-width="100px">
          <el-form-item label="常用功能名称">
            <el-select
              v-model="name"
              placeholder="请选择"
              clearable
              filterable
              width="50%"
              @change="selectSubjectItem($event)"
            >
              <el-option
                v-for="item in options1"
                :key="item.id"
                :label="item.title"
                :value="{
                  name: item.title,
                  url: item.path
                }"
              >
                <span style="float: left">{{ item.title }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="addCommon" size="mini"
            >保 存</el-button
          >
        </span>
      </el-dialog>
      <el-col :span="24" style="padding:20px;">
        <div
          class="component-item title"
          style="border-bottom:none;margin-left:0;"
        >
          <div class="fl">
            <img src="./image/dian.png" alt="" style="width:10px;" />
            <p class="title_l">业务中心</p>
          </div>
          <div class="fl" style="margin:7px 30px 0 0;">
            <span
              @click="delBusiness()"
              style="margin: 35px 0 0 15px;cursor:pointer"
            >
              <d2-icon name="trash" class="icon" style="color:#fc0302" />
            </span>
          </div>
        </div>
        <el-row :gutter="20" class="zj1" style="font-size:14px;clear:both;">
          <el-col :span="4" v-for="(item, index) in businessData" :key="index">
            <el-card
              class="bra box-card"
              v-bind:class="{
                active: item.top_id == center
              }"
              :body-style="{ padding: '0px' }"
            >
              <div
                class="grid-con-1 out"
                style="cursor:pointer;text-align:center;"
                v-if="item.type == 1"
                @dblclick="selected_b(item)"
                @click="businessLink(item)"
              >
                <div style="text-align:center;">
                  <img
                    :src="`${$baseUrl}static/image/index1.png`"
                    alt=""
                    style="margin-top:10px;"
                  />
                </div>
                <div class="" style="padding:10px 20px 15px 20px;">
                  <div class="wf">
                    合同号：<span class="c1 b f16">{{ item.deal_no }}</span>
                  </div>
                  <!-- <div class="xblue" style='margin-top:3px;'></div> -->
                </div>
                <div class="line">
                  <div class="wf">品名：{{ item.name }}</div>
                  <!-- <div>{{ item.name }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">方向：{{ item.direction }}</div>
                  <!-- <div>{{ item.direction }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">
                    单据数量：<span class="c2 b f16">{{
                      item.invoice_vol
                    }}</span>
                  </div>
                  <!-- <div>{{ item.invoice_vol }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">
                    敞口数量：<span class="c3 b f16">{{ item.exp_vol }}</span>
                  </div>
                  <!-- <div>{{ item.exp_vol }}</div> -->
                </div>
                <div
                  style="margin-bottom:-10px;background-color:#409EFF;color:#fff;margin-top:10px;height:45px;line-height:45px;"
                  @click="businessLink(item)"
                >
                  查看详情
                </div>
              </div>
              <div
                class="grid-con-1 out"
                style="cursor:pointer;text-align:center;"
                v-if="item.type == 2"
                @dblclick="selected_b(item)"
                @click="businessLink(item)"
              >
                <div style="text-align:center;">
                  <img
                    :src="`${$baseUrl}static/image/index2.png`"
                    alt=""
                    style="margin-top:10px;"
                  />
                </div>
                <div class="" style="padding:10px 20px 15px 20px;">
                  <div class="wf">
                    策略ID：<span class="c1 b f16">{{ item.strategy_id }}</span>
                  </div>
                  <!-- <div class="xblue" style='margin-top:3px;'></div> -->
                </div>
                <div class="line">
                  <div class="wf">策略类型：{{ item.strategy_type }}</div>
                  <!-- <div>{{ item.strategy_type }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">品名：{{ item.name }}</div>
                  <!-- <div>{{ item.name }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">合约：{{ item.instrument }}</div>
                  <!-- <div>{{ item.instrument }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">
                    套保比例：<span class="c3 b f16">{{
                      item.hedging_ratio_upper
                    }}</span>
                  </div>
                  <!-- <div>{{ item.hedging_ratio_upper }}</div> -->
                </div>
                <div
                  style="margin-bottom:-10px;background-color:#409EFF;color:#fff;margin-top:10px;height:45px;line-height:45px;"
                  @click="businessLink(item)"
                >
                  查看详情
                </div>
              </div>
              <div
                class="grid-con-1 out"
                style="cursor:pointer;text-align:center;"
                v-if="item.type == 3"
                @dblclick="selected_b(item)"
                @click="businessLink(item)"
              >
                <div style="text-align:center;">
                  <img
                    :src="`${$baseUrl}static/image/index3.png`"
                    alt=""
                    style="margin-top:10px;"
                  />
                </div>
                <div class="" style="padding:10px 20px 15px 20px;">
                  <div class="wf">
                    匹配ID：<span class="c1 b f16">{{ item.match_id }}</span>
                  </div>
                  <!-- <div class="xblue" style='margin-top:3px;'></div> -->
                </div>
                <div class="line">
                  <div class="wf">匹配分类：{{ item.type_name }}</div>
                  <!-- <div>{{ item.type_name }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">
                    所属策略ID：<span class="c2 b f16">{{
                      item.strategy_id
                    }}</span>
                  </div>
                  <!-- <div>{{ item.strategy_id }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">品名：{{ item.name }}</div>
                  <!-- <div>{{ item.name }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">
                    匹配数量：<span class="c3 b f16">{{
                      item.match_volume
                    }}</span>
                  </div>
                  <!-- <div>{{ item.match_volume }}</div> -->
                </div>
                <div
                  style="margin-bottom:-10px;background-color:#409EFF;color:#fff;margin-top:10px;height:45px;line-height:45px;"
                  @click="businessLink(item)"
                >
                  查看详情
                </div>
              </div>
              <div
                class="grid-con-1 out"
                style="cursor:pointer;text-align:center;"
                v-if="item.type == 4"
                @dblclick="selected_b(item)"
                @click="businessLink(item)"
              >
                <div style="text-align:center;">
                  <img
                    :src="`${$baseUrl}static/image/index4.png`"
                    alt=""
                    style="margin-top:10px;"
                  />
                </div>
                <div class="" style="padding:10px 20px 15px 20px;">
                  <div class="wf">
                    匹配ID：<span class="c1 b f16">{{ item.match_id }}</span>
                  </div>
                  <!-- <div class="xblue" style='margin-top:3px;'></div> -->
                </div>
                <div class="line">
                  <div class="wf">匹配分类：{{ item.type_name }}</div>
                  <!-- <div>{{ item.type_name }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">
                    所属策略ID：<span class="c2 b f16">{{
                      item.strategy_id
                    }}</span>
                  </div>
                  <!-- <div>{{ item.strategy_id }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">品名：{{ item.name }}</div>
                  <!-- <div>{{ item.name }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">
                    匹配数量：<span class="c3 b f16">{{
                      item.match_volume
                    }}</span>
                  </div>
                  <!-- <div>{{ item.match_volume }}</div> -->
                </div>
                <div
                  style="margin-bottom:-10px;background-color:#409EFF;color:#fff;margin-top:10px;height:45px;line-height:45px;"
                  @click="businessLink(item)"
                >
                  查看详情
                </div>
              </div>
              <div
                class="grid-con-1 out"
                style="cursor:pointer;text-align:center;"
                v-if="item.type == 5"
                @dblclick="selected_b(item)"
                @click="businessLink(item)"
              >
                <div style="text-align:center;">
                  <img
                    :src="`${$baseUrl}static/image/index2.png`"
                    alt=""
                    style="margin-top:10px;"
                  />
                </div>
                <div class="" style="padding:10px 20px 15px 20px;">
                  <div class="wf">
                    匹配ID：<span class="c1 b f16">{{ item.match_id }}</span>
                  </div>
                  <!-- <div class="xblue" style='margin-top:3px;'>{{ item.match_id }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">匹配分类：{{ item.type_name }}</div>
                  <!-- <div>{{ item.type_name }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">
                    所属策略ID：<span class="c2 b f16">{{
                      item.strategy_id
                    }}</span>
                  </div>
                  <!-- <div>{{ item.strategy_id }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">品名：{{ item.name }}</div>
                  <!-- <div>{{ item.name }}</div> -->
                </div>
                <div class="line">
                  <div class="wf">
                    匹配数量：<span class="c3 b f16">{{
                      item.match_volume
                    }}</span>
                  </div>
                  <!-- <div>{{ item.match_volume }}</div> -->
                </div>
                <div
                  style="margin-bottom:-10px;background-color:#409EFF;color:#fff;margin-top:10px;height:45px;line-height:45px;"
                  @click="businessLink(item)"
                >
                  查看详情
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="3" v-if="flag_b">
            <el-card
              class="bra box-card border"
              :body-style="{ padding: '0px' }"
            >
              <div class="grid-con-1 out" @click="add">
                <d2-icon
                  name="plus"
                  style="color:#A9A9A9;font-size:40px"
                  class="content"
                />
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- 添加业务弹框 -->
    <el-dialog
      title="添加业务"
      :visible.sync="businessVisible"
      width="25%"
      :append-to-body="true"
    >
      <el-form class="filter-container" label-width="100px">
        <el-form-item label="业务模块">
          <el-select
            v-model="business_module"
            placeholder="请选择"
            clearable
            filterable
            width="50%"
            @change="businessId"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务ID">
          <el-select
            v-model="business_id"
            placeholder="请选择"
            filterable
            style="width:64%;"
            clearable
          >
            <el-option
              v-for="item in businessIds"
              :key="item.business_id"
              :label="item.business_id"
              :value="item.business_id"
            >
              <span style="float: left">{{ item.business_id }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span span slot="footer" class="dialog-footer">
        <el-button @click="businessVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button type="primary" @click="addBusiness" size="mini"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </d2-container>
</template>

<script>
import { getCommon } from "@/api/url_info.js";
import { addCommon } from "@/api/url_info.js";
import { delCommon } from "@/api/url_info.js";
import { getBusiness } from "@/api/url_info.js";
import { addBusiness } from "@/api/url_info.js";
import { delBusiness } from "@/api/url_info.js";
import { msgList } from "@/api/url_info.js";
import { businessId } from "@/api/url_info.js";
import { modMsg } from "@/api/url_info.js";
// import dayjs from 'dayjs';
import { getReport_strategy_caps } from "@/api/url.js";
export default {
  //首页
  name: "index",
  components: {},
  data() {
    return {
      dialogVisible: false,
      businessVisible: false,
      flag: false,
      flag_b: false,
      name: "",
      url: "",
      business_id: "",
      link: "",
      delist: "",
      center: "",
      list: null,
      commonData: [],
      businessData: [],
      msgList: [],
      count: "",
      businessIds: [],
      options: [
        {
          value: "1",
          label: "合同号"
        },
        {
          value: "2",
          label: "策略ID"
        },
        {
          value: "3",
          label: "现货匹配ID"
        },
        {
          value: "4",
          label: "期货匹配ID"
        },
        {
          value: "5",
          label: "期权匹配ID"
        }
      ],
      options1: [],
      business_module: "",
      timer: null
    };
  },
  created: function() {
    this.getCommon();
    this.getBusiness();
    this.getStation_msg_list();
    this.allFunction();
  },
  mounted() {
    //第8个 策略资金占用
    let datas8 = {
      data_type: "comprehensive"
    };
    getReport_strategy_caps(datas8).then(res => {
      let Ydata = [];
      res.result.forEach(item => {
        Ydata.push(item.strategy_name);
        item.value = item.total;
        item.name = item.strategy_name + item.strategy_id;
      });
      let Xdata = res.result;
      this.$nextTick(() => {
        this.drawChart8(Xdata, Ydata);
      });
    });
    document.addEventListener("click", e => {
      if (this.$el.contains(e.target)) {
        this.center = "";
        this.delist = "";
      }
    });
  },
  filters: {
    ellipsis(value, limit) {
      if (!value) return "";
      if (value.length > limit) {
        return value.slice(0, limit) + "...";
      }
      return value;
    }
  },
  methods: {
    drawChart8(xdata, ydata) {
      let myChart_right_center = this.$echarts.init(
        document.getElementById("main_right_center")
      );
      myChart_right_center.setOption({
        title: {
          text: "",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: "center",
          data: ydata
        },
        color: ["#27c09c", "#1E90FF", "#e65952", "#e89533"],
        series: [
          {
            name: "策略资金占用",
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: xdata,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    },
    //所有功能
    allFunction() {
      let arr = this.$store.getters.menus,
        obj = [];
      for (let i in arr) {
        obj.push(arr[i].children);
      }
      //二维数组转一维数组
      let datalist = [].concat.apply([], obj);
      this.options1 = datalist;
    },
    //跳转常用功能
    linkto(data) {
      let timers = this.timer;
      if (timers) {
        window.clearTimeout(timers);
        this.timer = null;
      }
      this.timer = window.setTimeout(() => {
        this.$router.push({ path: data.url });
      }, 300);
    },
    //跳转业务中心
    businessLink(data) {
      let timers = this.timer,
        url = "";
      if (timers) {
        window.clearTimeout(timers);
        this.timer = null;
      }
      if (data.type == 1) {
        url = "/arbitrage_tool/cash_management";
      } else if (data.type == 2) {
        if (data.strategy_type == "现货期货套期") {
          url =
            "/spotFuturesHedging_E?strategy_id=" +
            data.strategy_id +
            "&state=check";
        } else if (data.strategy_type == "现货现货套期") {
          url =
            "/spotHedging_E?strategy_id=" + data.strategy_id + "&state=check";
        } else if (data.strategy_type == "现货期权套期") {
          url =
            "/spotOptionHedging_E?strategy_id=" +
            data.strategy_id +
            "&state=check";
        } else if (data.strategy_type == "期货期货套利") {
          url =
            "/futuresArbitrage_E?strategy_id=" +
            data.strategy_id +
            "&state=check";
        } else if (data.strategy_type == "现货单边") {
          url =
            "/spotUnilateral_E?strategy_id=" +
            data.strategy_id +
            "&state=check";
        } else if (data.strategy_type == "期货单边") {
          url =
            "/futuresUnilateral_E?strategy_id=" +
            data.strategy_id +
            "&state=check";
        }
      } else if (data.type == 3) {
        url = "/spotMatch_A?match_id=" + data.match_id + "&state=check";
      } else if (data.type == 4) {
        if (data.command_id) {
          url = "/instruct_A?match_id=" + data.match_id + "&state=check";
        } else {
          url = "/tactics_A?match_id=" + data.match_id + "&state=check";
        }
      } else if (data.type == 5) {
        url = "/optionMatch_A?match_id=" + data.match_id + "&state=check";
      }
      this.timer = window.setTimeout(() => {
        this.$router.push({ path: url });
      }, 300);
    },
    //查询业务模块
    async businessId() {
      this.business_id = "";
      if (this.business_module.length > 0) {
        await businessId({ business_module: this.business_module })
          .then(res => {
            let businessIds = [];
            let data = res.result;
            for (let i = 0; i < data.length; i++) {
              if (this.business_module == 1) {
                businessIds[i] = {
                  business_id: data[i]["deal_no"]
                };
              } else if (this.business_module == 2) {
                businessIds[i] = {
                  business_id: data[i]["strategy_id"]
                };
              } else {
                businessIds[i] = {
                  business_id: data[i]["match_id"]
                };
              }
            }
            this.businessIds = businessIds;
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      } else {
        this.business_id = "";
      }
    },
    selectSubjectItem(event) {
      this.name = event.name;
      this.url = event.url;
    },
    //查询我的消息
    async getStation_msg_list() {
      await msgList({ own_flag: 1 })
        .then(res => {
          let msgList = [];
          let data = res.result.results;
          this.count = res.result.count;
          for (let i = 0; i < data.length; i++) {
            msgList[i] = {
              content: data[i]["content"],
              created_time: data[i]["created_time"],
              title: data[i]["title"],
              is_read: data[i]["is_read"],
              id: data[i]["id"],
              send_depart: data[i]["send_depart"],
              send_user: data[i]["send_user"],
              is_send: data[i]["is_send"],
              notice_type: data[i]["notice_type"]
            };
          }
          this.msgList = msgList;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //站内消息修改
    async modMsg(data) {
      let params = {
        operation: "MOD",
        id: data.id,
        title: data.title,
        content: data.content,
        is_send: data.is_send,
        is_read: 1,
        notice_type: data.notice_type
      };
      await modMsg(params)
        .then(res => {
          this.getStation_msg_list();
          this.$message({
            message: res.msg,
            type: "success"
          });
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //查询业务中心
    async getBusiness() {
      await getBusiness()
        .then(res => {
          let businessData = [];
          let data = res.result;
          for (let i = 0; i < data.length; i++) {
            if (data[i]["type"] == 1) {
              businessData[i] = {
                deal_no: data[i]["deal_no"],
                direction: data[i]["direction"],
                name: data[i]["name"],
                exp_vol: data[i]["exp_vol"],
                invoice_vol: data[i]["invoice_vol"],
                top_id: data[i]["top_id"],
                type: data[i]["type"]
              };
            } else if (data[i]["type"] == 2) {
              businessData[i] = {
                strategy_id: data[i]["strategy_id"],
                strategy_type: data[i]["strategy_type"],
                name: data[i]["name"],
                instrument: data[i]["instrument"],
                hedging_ratio_upper: data[i]["hedging_ratio_upper"],
                top_id: data[i]["top_id"],
                type: data[i]["type"]
              };
            } else {
              businessData[i] = {
                match_id: data[i]["match_id"],
                type_name: data[i]["type_name"],
                name: data[i]["name"],
                top_id: data[i]["top_id"],
                strategy_id: data[i]["strategy_id"],
                match_volume: data[i]["match_volume"],
                command_id: data[i]["command_id"],
                type: data[i]["type"]
              };
            }
          }
          if (businessData.length < 5) {
            this.flag_b = true;
          } else {
            this.flag_b = false;
          }
          businessData.forEach(item => {
            if (item.name) {
              item.name = item.name.toString();
            }
            if (item.direction) {
              item.direction = item.direction.toString();
            }
            if (item.instrument) {
              item.instrument = item.instrument.toString();
            }
            if (item.match_volume) {
              item.match_volume = item.match_volume.toString();
            }
          });
          this.businessData = businessData;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //查询常用功能
    async getCommon() {
      await getCommon()
        .then(res => {
          let commonData = [];
          let data = res.result;
          for (let i = 0; i < data.length; i++) {
            commonData[i] = {
              id: data[i]["id"],
              name: data[i]["name"],
              url: data[i]["url"]
            };
          }
          if (commonData.length < 9) {
            this.flag = true;
          } else {
            this.flag = false;
          }
          this.commonData = commonData;
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    //新增常用功能
    addFunction() {
      if (this.commonData.length > 8) {
        this.flag = false;
      } else {
        this.name = "";
        this.url = "";
        this.flag = true;
        this.dialogVisible = true;
      }
    },
    //新增业务中心
    add() {
      if (this.businessData.length >= 5) {
        this.flag_b = false;
      } else {
        this.business_module = "";
        this.business_id = "";
        this.flag_b = true;
        this.businessVisible = true;
      }
    },
    addCommon() {
      if (this.name) {
        addCommon({ operation: "ADD", name: this.name, url: this.url })
          .then(res => {
            this.dialogVisible = false;
            this.$message({
              message: res.result,
              type: "success"
            });
            this.getCommon();
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      } else {
        this.$message({
          message: "常用功能名称不能为空",
          type: "warning"
        });
      }
    },
    addBusiness() {
      if (this.business_id && this.business_module) {
        let params = {
          operation: "ADD",
          top_business: {
            business_id: this.business_id,
            business_module: this.business_module
          }
        };
        addBusiness(params)
          .then(res => {
            this.businessVisible = false;
            this.$message({
              message: res.result,
              type: "success"
            });
            this.getBusiness();
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      } else {
        this.$message({
          message: "业务模块和业务ID不能为空",
          type: "warning"
        });
      }
    },
    //选择常用功能
    selected(item) {
      let timers = this.timer;
      if (timers) {
        window.clearTimeout(timers);
        this.timer = null;
      }
      this.delist = item;
      this.link = item.id;
    },
    //选择业务中心
    selected_b(item) {
      let timers = this.timer;
      if (timers) {
        window.clearTimeout(timers);
        this.timer = null;
      }
      this.center = item.top_id;
      this.list = item;
    },
    //删除常用功能
    delCommons() {
      if (this.link) {
        this.$confirm("是否要删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          delCommon({ operation: "DEL", id: this.link })
            .then(res => {
              this.$message({
                message: res.result,
                type: "success"
              });
              this.delist = "";
              this.getCommon();
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        });
      } else {
        this.$message({
          message: "请选择一个功能",
          type: "warning"
        });
      }
    },
    //删除业务中心
    delBusiness() {
      if (this.center) {
        this.$confirm("是否要删除？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          delBusiness({ operation: "DEL", top_business: this.list })
            .then(res => {
              this.$message({
                message: res.result,
                type: "success"
              });
              this.center = "";
              this.getBusiness();
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        });
      } else {
        this.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      }
    },
    //更多
    more() {
      this.$router.push("/personal_center/log");
    },
    // 企业经营
    more1() {
      this.$router.push("/report_form_statistics/nearby");
    }
  }
};
</script>

<style lang="scss" scoped>
.icon {
  color: #808080;
  font-size: 20px;
  padding-top: 10px;
}
.active {
  border: 1px solid red;
}
.out {
  position: relative;
  height: 350px;
  width: 100%;
}
.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box-flex {
  display: flex;
}
.zj div:first-child,
.zj div:nth-child(2),
.zj div:nth-child(3),
.zj div:nth-child(4),
.zj div:nth-child(5),
.zj div:nth-child(6) {
  margin-bottom: 10px;
}
.bgzj div:first-child .el-card,
.bgzj div:nth-child(6) .el-card,
.bgzj div:nth-child(8) .el-card {
  background-color: #0fc09c;
  opacity: 0.8;
}
.bgzj div:nth-child(2) .el-card,
.bgzj div:nth-child(4) .el-card,
.bgzj div:nth-child(9) .el-card {
  background-color: #e89533;
  opacity: 0.8;
}
.bgzj div:nth-child(3) .el-card,
.bgzj div:nth-child(5) .el-card,
.bgzj div:nth-child(7) .el-card {
  background-color: #e65952;
  opacity: 0.8;
}
.bal div {
  background: none !important;
}
.btn_detail button {
  border: none;
  background-color: #3b8af3;
  padding: 6px 12px;
  color: #fff;
  font-size: 13px;
  border-radius: 3px;
}
.line {
  padding: 0 20px 15px 20px;
}
.border {
  border: 1px dashed #bbb;
  cursor: pointer;
}

.tl {
  text-align: left;
}
.title_l {
  display: inline-block;
  margin-left: 15px;
}
.title {
  margin-bottom: 0px;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.f13 {
  font-size: 13px;
}
.f14_f {
  color: #606266;
}
.bra {
  border-radius: 10px !important;
}
.grid-content {
  display: flex;
  align-items: center;
  height: 100px;
}
.grid-con-1 .grid-con-icon {
  background: rgb(45, 140, 240);
}
.grid-con-1 .grid-num {
  color: rgb(45, 140, 240);
}
.grid-cont-right {
  flex: 1;
  text-align: center;
  font-size: 14px;
  color: #999;
}
.xblue {
  color: #3b8af3;
}
.b {
  font-weight: bold;
}
ul li {
  list-style: none;
}
.c1 {
  color: #0fc09c;
}
.c2 {
  color: #e89533;
}
.c3 {
  color: #e65952;
}
</style>
